<template>
    <div>
        <mt-header class="m_home_header" :title="topTitle"></mt-header>
        <mt-tab-container v-model="tabSelected">
            <mt-tab-container-item id="wallet">
                <wallet></wallet>
            </mt-tab-container-item>
            <mt-tab-container-item id="mine">
                <mine></mine>
            </mt-tab-container-item>
        </mt-tab-container>
        <tab-footer
            :active-link="tabSelected"
            @changeTab="changeTabClick"
        ></tab-footer>
    </div>
</template>

<script>
    import TabFooter from '../footer/TabFooter';
    import Wallet from './components/Wallet';
    import Mine from './components/Mine';

    export default {
        name: "Home",
        components:{
            TabFooter,
            Wallet,
            Mine,
        },
        data() {
            return {
                tabSelected: this.$store.state.topTab,
                topTitle:"理 财",
            }
        },
        watch:{
            tabSelected(){
                this.getTopTitle()
            },
        },
        mounted() {
            this.getTopTitle();
        },
        methods: {
            changeTabClick(tab){
                this.tabSelected = tab;
            },
            getTopTitle(){
                if(this.tabSelected === "wallet"){
                    this.topTitle = "理 财";
                }else if(this.tabSelected === "mine"){
                    this.topTitle = "我 的";
                }
            },
        }
    }
</script>

<style>
    .m_home_header{
        height: 1rem!important;
        background: linear-gradient(#fea425, #e47307);

    }
    .m_home_header .mint-header-title{
        color:#fff;
        font-size: .32rem!important;
        font-weight: bold!important;
    }
</style>
